<template>
  <div>
    <StationDetailPanel :detail-data="detailData"></StationDetailPanel>
    <i-tabs type="card" ref="tabs" v-model="activeName" :tabs="tabs" />
  </div>
</template>
<script>
import StationDetailPanel from './components/StationDetailPanel'
import { stationDetail } from '@/api/device'

export default {
  name: 'StationDetail',
  components: { StationDetailPanel },
  data() {
    return {
      detailData: {},
      imgSrc: '',
      activeName: this.$route.query.type || 'ZTSocket',
      tabs: [
        // {
        //   label: '网关',
        //   name: 'gateway',
        //   component: () => import('./components/DetailTable'),
        //   ref: 'gateway',
        //   type: 'GATEWAY',
        // },
        // {
        //   label: '插座',
        //   name: 'plug',
        //   component: () => import('./components/DetailTable'),
        //   ref: 'plug',
        //   type: 'SOCKET',
        // },
        // {
        //   label: '中唐智能网关',
        //   name: 'ZTGateway',
        //   component: () => import('./components/DetailTable'),
        //   ref: 'ZTGateway',
        //   type: 'ZT_GATEWAY',
        // },
        {
          label: '中唐智能插座',
          name: 'ZTSocket',
          component: () => import('./components/DetailTable'),
          ref: 'ZTSocket',
          type: 'ZT_SOCKET',
        },
        {
          label: '天软智能插座',
          name: 'TR_SOCKET',
          component: () => import('./components/DetailTable'),
          type: 'TR_SOCKET',
        },
        // {
        //   label: '刷卡设备',
        //   name: 'creditCard',
        //   component: () => import('./components/DetailTable'),
        //   ref: 'creditCard',
        //   type: 'SWIPCARD_DEVICE',
        // },
        // {
        //   label: 'NB插座',
        //   name: 'NBplug',
        //   component: () => import('./components/DetailTable'),
        //   ref: 'NBplug',
        //   type: 'NB_DEVICE',
        // },
        // {
        //   label: '集中式插座',
        //   name: 'CTLplug',
        //   component: () => import('./components/DetailTable'),
        //   ref: 'CTLplug',
        //   type: 'CENTRAL_SOCKET',
        // },
      ],
    }
  },
  created() {
    stationDetail({ id: this.$route.params.id }).then((res) => {
      this.detailData = res
      this.tabs.forEach((item) => {
        item.stationAttr = this.detailData
      })
    })
  },
}
</script>
